<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/my.css" />

    <style>
        .my-bd {
            background-color: #fff;
        }
        
        .detail_hd {
            display: flex;
            height: .64rem;
            background-color: #fff;
            border-bottom: .0113rem solid #ccc;
            align-items: center;
            margin: 0 .1875rem .1875rem .1875rem;
        }
        
        .detail_hd .user_icon {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            /* background-color: skyblue; */
            overflow: hidden;
        }
        
        .detail_hd .user_icon img {
            width: .5rem;
            height: .5rem;
        }
        
        .detail_hd .user_info {
            margin-left: .1333rem;
        }
        
        .detail_hd .user_info p {
            color: #ccc;
        }
        
        .detail_bd {
            margin: .1875rem;
        }
        
        .detail_bd h4 {
            color: #ccc;
            font-weight: 400;
        }
        
        .detail_bd h4 strong {
            font-size: .375rem;
            color: red;
            font-weight: 400;
            margin-left: .125rem;
            padding-right: .0625rem;
        }
        
        .detail_bd p {
            font-size: .1875rem;
            margin-top: .1875rem;
        }
        
        .detail_bd .col1 {
            margin: .1875rem 0;
        }
        
        .detail_bd .col2,
        .detail_bd .col3 {
            font-size: .125rem;
        }
        
        .detail_bd .col2 span,
        .detail_bd .col3 span {
            color: #ccc;
            font-size: .1875rem;
        }
        
        .detail_bd .col4 img {
            margin-top: .1875rem;
            width: 3.125rem;
            padding-left: .3125rem;
        }
        
        .detail_bd .col5 {
            font-size: .0625rem;
            color: #ccc;
            padding-bottom: .1875rem;
        }
        
        .company {
            height: 6.25rem;
            margin: .1875rem;
        }
        
        .company_hd {
            text-align: center;
        }
        
        .company ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: .75rem;
            background-color: #fff;
            margin: .1875rem 0;
            border-radius: 0.133333rem;
        }
        
        .company ul li .user {
            display: flex;
            margin-left: .1875rem;
        }
        
        .company ul li .user img {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
        }
        
        .company ul li .user .user_info {
            display: flex;
            flex-direction: column;
            margin-left: .1333rem;
            justify-content: center;
            align-items: center;
        }
        
        .company .user_status {
            margin-right: .1875rem;
            color: red;
        }
        
        .join {
            height: .375rem;
            line-height: .375rem;
            margin-bottom: .0625rem;
        }
        
        .join a {
            float: right;
            height: .3125rem;
            line-height: .3125rem;
            background-color: rgb(240, 222, 229);
            margin: .0625rem .1333rem .0625rem .0625rem;
            border-radius: 0.133333rem;
            color: red;
            padding: 0 .0625rem;
        }
    </style>

    <title>需求详情 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">需求详情 - 孝邻会</div>
                <div class="header-right">
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <div class="my-bd">
                <div class="detail_hd">
                    <div class="user_icon">
                        <img src="../../static/mobile/default/images/defheadimg.jpg" alt="" />
                    </div>
                    <div class="user_info">
                        <h4></h4>
                        <p></p>
                    </div>
                </div>
                <div class="detail_bd">
                    <h4><strong></strong>(预算)</h4>
                    <p class="col1"></p>
                    <p class="col2"><span>联系电话&nbsp; </span></p>
                    <p class="col3"><span>截止时间&nbsp; </span></p>
                    <p class="col4"></p>
                    <p class="col5"><span>发布时间：&nbsp; </span></p>
                </div>
            </div>
            <div class="company">
                <div class="company_hd">服务商企业</div>
                <ul>
                </ul>
            </div>

        </div>

        <script id="TagTpl" type="text/html">
            {{each joinList as join index}}
            <li>
                <div class="user">
                    <img src="{{join.joinUserIcon}}" alt="" />
                    <div class="user_info">
                        <h4>{{join.joinUserName}}</h4>
                        <p>{{join.joinCompanyName}}</p>
                    </div>
                </div>
                <div class="user_status">{{if join.status==1}}等待对接{{else if join.status==2}}正在对接{{/if}}</div>
            </li>
            {{/each}}
        </script>


        <!-- 发起对接-->
        <div class="join">
            <a href="#" id="sendJoin">发起对接</a>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>

    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>
    <!-- 页面js部分 -->
    <script>
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }

        var caseId = getUrlParam("caseId");

        function getCaseDetail() {
            $.ajax({
                url: 'https://mp.jianguoes.com/api/res/caseDetail', // 跳转到 action
                data: {
                    caseId: caseId
                },
                type: 'post',
                headers: {
                    'token': $.cookie('code')
                },
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                    if (res.errno != 0) {
                        _alert(res.errmsg);
                        return false;
                    }
                    var concent = ''

                    $('.detail_hd .user_icon').find('img').attr('src', res.data.userIcon);
                    $('.detail_hd .user_info').find('h4').text(res.data.userName);
                    $('.detail_hd .user_info').find('p').text(res.data.companyName);

                    $('.detail_bd>h4>strong').text(res.data.amount + '元');
                    $('.detail_bd .col1').text(res.data.caseDesc);
                    $('.detail_bd .col2').html('<span>联系电话&nbsp; </span>' + res.data.mobile);
                    $('.detail_bd .col3').html('<span>截止时间&nbsp; </span>' + res.data.endTime);
                    $('.detail_bd .col4').append('<img src="' + res.data.casePic + '"  alt=""/>')
                    $('.detail_bd .col5').html('<span>发布时间：&nbsp; </span>' + res.data.addTimeStr);


                    if (res.data.joinList.length > 0) {
                        $('.company > ul').append(template('TagTpl', res.data));
                    }

                },
                error: function() {}
            });
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            FastClick.attach(document.body);

            // 获取需求详情数据
            getCaseDetail();

            $("#sendJoin").click(function() {
                window.location.href = "joincase.html?caseId=" + caseId;
            });

        });
    </script>
</body>

</html>